<style lang="scss" scoped>
    @import '../../css/training.scss';



    //输入框tags
    .tags-wrap{
        width: 100%;
        height: 100%;
        outline: none;
        &::after{
            content: "";
            display: block;
            height: 0;
            clear: both;
        }
    }
    .tags, .tags-input{
        position: relative;
        float: left;
        color: #fff;
        line-height: 28px;
        margin: 0 4px 4px 0;
        padding: 0 22px 0 10px;
        border-radius: 6px;
        .content{
            line-height: 28px;
        }
        .del{
            width: 22px;
            height: 28px;
            text-align: center;
            cursor: pointer;
            position: absolute;
            top: -1px;
            right: 0;
        }
    }
    .tags-input{
        font-size: 14px;
        padding: 0;
        background-color: inherit;
        border: none;
        color: inherit;
        width: 10em;
    }

    /*导航条*/

    .step-head{padding: 24px 20px 0 20px;background: #fff;position: relative;font-size: 18px;font-weight: bold;}
    .step-one{float: left;background: $mcb;width:150px;height: 40px;line-height: 40px;text-align: center;margin-right: 58px;color: #ccc;}
    .triangel-left{display: inline-block;width: 0;height: 0;border:20px solid rgba(1,1,1,0);border-left: 20px solid $mcb;position: absolute;top:24px;left: 168px;}
    .triangel-right{display: inline-block;width: 0;height: 0;border:20px solid $mcb;border-left: 20px solid rgba(1,1,1,0);position: absolute;top:24px;left: 180px;}
    .step-two{margin-left: 190px;background: $mcb;height: 40px;line-height: 40px;}


</style>

<template>
    <section>

        <div class="step-head">
            <span class="step-one">创建学习计划</span>
            <span class="triangel-left"></span>
            <span class="triangel-right"></span>
            <div class="step-two">编辑学习计划</div>
        </div>


        <!--单选题添加框-------这边完成后需要在exam中替换掉---->
        <section class="mt60 add-content pb20 clearfix">
            <div class="ac-left-tab fl">
                <span class="mt20">Q1</span>
                <span class="mt20" style="cursor: pointer;" @click="doOutTop"><img class="public-icon" src="../../images/compile_ic.png" alt=""></span>
                <span class="mt20" style="cursor: pointer;"><img class="public-icon" src="../../images/Training-ic-down.png" alt=""></span>
                <span class="mt20" style="cursor: pointer;"><img class="public-icon" src="../../images/delete_ic.png" alt=""></span>
            </div>
            <div class="ac-right-table">
                <div class="ac-table-title mt20">
                    <input class="input-type-a fs-14" type="text" placeholder="迟到几次不扣钱"><span class="fs-14 ml20" style="line-height: 42px;">【单选题】</span>
                    <span class="fs-14 fr">
                        <span style="line-height: 42px;">分值<input class="ml mr inputTypes-two" type="text" value="10"> 分</span>
                    </span>
                </div>
                <div class="ac-table-out">
                    <ul class="ac-table-box">
                        <li v-if="!item.deleteSingleList" v-for="item,$index in contentList">
                            <el-radio  v-model="checked" :label="item.text">{{letterList[$index]}}</el-radio>
                            <input class="ml input-type-b" type="text" placeholder="请输入内容" v-model="item.text">
                            <el-radio class="ml20"  v-model="checked" :label="item.text">设为答案</el-radio>
                            <div class="fr cut-position-box">
                                <span :class="{'hide':firstIndex == $index}" @click="switchUp(item,$index)"><img class="public-icon" src="../../images/Training-ic-Facing-up.png" alt=""></span>
                                <span :class="{'hide': lastIndex == $index}" @click="switchDown(item,$index)" class="ml mr public-icon"><img src="../../images/Training-ic-down.png" alt=""></span>
                                <span @click="switchDelete(item)"><img class="public-icon" src="../../images/delete_ic.png" alt=""></span>
                            </div>
                        </li>

                        <li>
                            <span class="ml add-options-space fs-14" type="text" @click="toAddRadioChoose">+添加选项</span>
                        </li>
                    </ul>
                </div>
                <el-button class="btn-active btn-or" style="margin-left: 46px;margin-top: 20px;">保存</el-button>
            </div>

        </section>

        <!--问答题添加框-->
        <section class="add-content pb20 clearfix mt">
            <div class="ac-left-tab fl">
                <span class="mt20">Q1</span>
                <span class="mt20"><img class="public-icon" src="../../images/compile_ic.png" alt=""></span>
                <span class="mt20"><img class="public-icon" src="../../images/Training-ic-down.png" alt=""></span>
                <span class="mt20"><img class="public-icon" src="../../images/delete_ic.png" alt=""></span>
            </div>
            <div class="ac-right-table">
                <div class="ac-table-title mt20">
                    <input class="input-type-a fs-14" type="text" placeholder="迟到几次不扣钱"><span class="fs-14 ml20" style="line-height: 42px;">【问答题】</span>
                </div>
                <div class="ac-table-out mt20">
                    <div class="ac-table-in">
                        <el-input type="textarea" :autosize="{ minRows:6}" placeholder="请输入内容" v-model="answersThree"></el-input>
                    </div>
                </div>
            </div>
        </section>

        <!--问卷单选题添加框-->
        <section class="add-content pb20 clearfix mt">

            <div class="ac-right-table">
                <div class="ac-table-title mt20">
                    <input class="input-type-a fs-14" type="text" placeholder="迟到几次不扣钱">
                </div>
                <div class="ac-table-out">

                </div>
            </div>

        </section>


        <!--生成问卷-->
        <!--问卷选择题-->
        <ul>
            <li v-for="item in bigList" style="border:1px solid red;">
                <section v-if="item.types = 1" class="edit-status1 clearfix" >
                    <div style="width:50px;" class="question-leftccol fl naire-question-left">
                        <span>Q1</span>
                        <span><img class="public-icon mt20" src="../../images/compile_ic.png" alt=""></span>
                        <span><img class="public-icon mt20" src="../../images/Training-ic-down.png" alt=""></span>
                        <span><img class="public-icon mt20" src="../../images/delete_ic.png" alt=""></span>
                    </div>
                    <div class="p-relative mt" style="margin-left: 50px;">
                        <div class="question-content mt20">
                            <p class="question-topic">
                                <span>{{item.theme}}</span>
                            </p>
                            <ul class="question-options">
                                    <li class="mt20 fs-14" v-for="one,index2 in item.answers">
                                        <el-radio v-model="item.correctNum" :label="index2">{{letterList[index2]}}<span class="ml20"></span>{{one.content}}</el-radio>
                                    </li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!--多选题添加完成后的状态-->
                <section v-if="item.types =  2" class="edit-status2">
                    第二种模块
                </section>

                <!--问答题添加框添加完成后的状态-->
                <section v-if="item.types = 3" class="edit-status2">
                    <div class="naire-sub mt">
                        <div class="naire-sub-left">
                            <span style="color:#f56c6c;">*</span>
                            <span class="ml">Q1</span>
                        </div>
                        <div class="naire-sub-right">
                            <p>{{item.theme}}<span class="ml">(必答)</span></p>
                            <div class="naire-subr-content">{{item.answers.content}}</div>
                        </div>
                    </div>
                </section>

            </li>
        </ul>


        <!--生成问卷问答题-->
        <div class="naire-sub mt">
            <div class="naire-sub-left">
                <span style="color:#f56c6c;">*</span>
                <span class="ml">Q1</span>
            </div>
            <div class="naire-sub-right">
                <p>jjjjjjj<span class="ml">(必答)</span></p>
                <div class="naire-subr-content">dddd</div>
            </div>
        </div>


            <!--demo-->
        <div class="input tags-wrap">
            <div class="tags" transition="tags" :style="{backgroundColor: bgc[item.bgc_no]}" v-for="item in dis_source">
                <span class="content">{{item.text}}</span><span class="del" @click="del($index, false)">&times;</span>
            </div>
            <input class="tags-input" type="text" placeholder="标签，按 enter 创建" v-model="text" @keyup.enter="add(text)" @keydown.delete="del(source.length - 1, true)">
        </div>

        <v-tags :source.sync="tagList"></v-tags>



    </section>
</template>

<script>

	import qs from 'qs'

	export default{


		props: {
			source: {
				type: Array,
				default: []
			}
		},


		data: function(){


			var dis_source = [];
			this.source.forEach(function (item) {
				var obj = {
					text: item,
					bgc_no: Math.ceil(Math.random() * 10) - 1
				}
				dis_source.push(obj)
			});

			return {


				text: '',
				bgc: ['#e961b4', '#ed664b', '#7b6ac7', '#56abd1', '#f7af4c', '#fe5467', '#52c7bd', '#a479b7', '#cb81ce', '#5eabc5'],
				dis_source: dis_source,




				answersOne:'',  //单选题答案
				answersThree:'',   //多选题答案

                outList:{
					questitle:'',questype:'',quesScore:'',
					contentList:[
						{answersRadio: '1',answersOne2: 'a',text:'我是单条答案111',deleteSingleList:false,checked: false,},
						{answersRadio: '2',answersOne2: 'b',text:'我是单条答案222',deleteSingleList:false,checked: false,},
						{answersRadio: '3',answersOne2: 'c',text:'我是单条答案333',deleteSingleList:false,checked: false,},
					],
                },

				contentList:[
					{answersRadio: '1',answersOne2: 'a',text:'我是单条答案111',deleteSingleList:false,checked: false,},
					/*{answersRadio: '2',answersOne2: 'b',text:'我是单条答案222',deleteSingleList:false,checked: false,},
					{answersRadio: '3',answersOne2: 'c',text:'我是单条答案333',deleteSingleList:false,checked: false,},*/
				],
				contentListSpace:[
					{answersRadio: '4',answersOne:'E',text:'',deleteSingleList:true},
				],
				toAddRadioChooseData: false,  //添加选项
//                切换单条数据
				firstIndex: 0,  //第一条数据
				lastIndex: '', //最后一条数据
                letterList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T'],
				checked: '',


//                生成问卷----中
//                外层列表
//                bigList:[
//                    {
//                    	theme:'范德萨发生大大大大是大大大',
//                        types: '1',
//						correctNum:'0',
//                        answers:[
//							{content:'我是选项1',correct:0},
//							{content:'我是选项2',correct:0},
//							{content:'我是选项3',correct:0},
//							{content:'我是选项4',correct:0},
//                        ]
//                    },
//                    {
//						theme:'范德萨发生大大大大是大大大',
//						types: '1',
//						correctNum:'1',
//						answers:[
//							{content:'我是选项1',correct:0},
//							{content:'我是选项2',correct:0},
//							{content:'我是选项3',correct:0},
//							{content:'我是选项4',correct:0},
//						]
//					},
//					{
//						theme:'范德萨发生大大dddd大大大',
//						types: '3',
//						answers:[
//							{content:'fahdh放大点卡和大家都比较安定旧版本'},
//						]
//					},
//                ]
			}
		},
		mixins: [mixinMethods],
		methods: {
			switchUp(one,index){//左侧按钮
                let self = this;
				self.contentList.splice(index,1);
				self.contentList.splice(index-1,0,one);
				let itemNewLast = self.contentList[index-1].answersOne;  //上一个
				let itemNewNext = self.contentList[index].answersOne;  //下一个
                one.answersOne = itemNewNext;
				self.contentList[index].answersOne = itemNewLast;
				console.log(one.answersOne,self.contentList[index].answersOne)

			},
			switchDown(one,index){
				let self = this;
				self.contentList.splice(index,1);
				self.contentList.splice(index+1,0,one);
				let itemNewLast = self.contentList[index].answersOne;  //上一个
				let itemNewNext = self.contentList[index+1].answersOne;  //下一个
				one.answersOne = itemNewLast;
				self.contentList[index].answersOne = itemNewNext;
				console.log(one.answersOne,self.contentList[index].answersOne)
            },
			switchDelete(item){
                item.deleteSingleList = true;
            },
			toAddRadioChoose(){
				let self = this;
				self.contentList.push ({answersRadio: '',answersOne2: 'a',text:'',deleteSingleList:false,checked: 1,});
				//点击按钮---添加一个li标签
				this.lastIndex = (this.contentList.length - 1);//更新列表
            },

			doOutTop(){//

            },


			add(text){
				if(text != ''){
					var count = this.source.length
					this.source.$set(count, text)
					this.dis_source.$set(count, {
						text: text,
						bgc_no: Math.ceil(Math.random() * 10) - 1
					})
					this.text = ''
				}
			},
			del(index, way){
				if(way){
					if(index >=0 && this.text == ''){
						this.source.splice(index, 1)
						this.dis_source.splice(index, 1)
					}
				}else {
					this.source.splice(index, 1)
					this.dis_source.splice(index, 1)
				}
			}

		},
		mounted: function() {
			this.lastIndex = (this.contentList.length - 1);
		},
        components: {
//                'v-tags': tags,
        }
	}


</script>